<template>
  <div class="top">
    <div class="content">
      <div class="name-block">
<!--        <img src="@/assets/home/logo.png" class="logo">-->
<!--        <div class="name-item">-->
<!--          <div class="name">酒泉妇女</div>-->
<!--          <div class="text">酒泉市妇女联合会</div>-->
<!--        </div>-->
      </div>
<!--      <div class="title-item">-->
<!--        <div class="name">自尊 自信 </div>-->
<!--        <div class="name">自立 自强</div>-->
<!--      </div>-->
<!--      <div class="search-block">-->
<!--          <input placeholder="请输入关键字" v-model="title" class="input"/>-->
<!--        <router-link :to="{path:'/searchList',query:{title:title}}">-->
<!--          <img src="@/assets/home/search.png" class="search-icon">-->
<!--        </router-link>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      title:''
    }
  }
}
</script>
<style lang="scss" scoped>
.top{
  width: 100%;
  height: 200px;
  background: url("@/assets/home/top-img4.gif") no-repeat center;
  background-size: 100% 110%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .content{
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name-block{
      display: flex;
      align-items: center;
      margin-left: 10%;
      .logo{
        width: 120px;
        height:120px;
        margin-right: 25px;
      }
      .name-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        .name{
          background: linear-gradient(to bottom, #FEA391 30%, #FE5569 60%, #FD1548 90%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 40px;
          font-weight: bold;
          margin-bottom: 6px;
          border-bottom: 2px solid;
          padding-bottom: 6px;
          letter-spacing: 9px; /* 增加字母间距 */
          border-image: linear-gradient(to right,  #FEA391 30%, #FE5569 60%, #FD1548 90%) 3 stretch;
        }
        .text{
          background: linear-gradient(to bottom, #FEA391 30%, #FE5569 60%, #FD1548 90%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 17px;
          letter-spacing: 9px; /* 增加字母间距 */
        }
      }
    }
    .title-item{
      .name{
        background: linear-gradient(to bottom, #FEA391 30%, #FE5569 60%, #FD1548 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 55px;
        font-weight: bold;
        letter-spacing: 20px; /* 增加字母间距 */
        ///font-family: Arial, Helvetica, sans-serif;
      }
    }
    .search-block{
      display: flex;
      background-color: #FFFFFF;
      height: 35px;
      width: 400px;
      align-items: center;
      justify-content: space-between;
      border: 2px solid ;
      border-image: linear-gradient(to bottom,  #FEA391 30%, #FE5569 60%, #FD1548 90%) 3 stretch;
      .input{
        padding-left: 14px;
        width: 360px;
      }
      .search-icon{
        width: 20px;
        height:20px;
        margin-right: 10px;
      }
    }
  }
}
</style>
